<template>
    
    <!-- 组件的模板 -->
    <div class="changemyphone">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">新手机号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" pattern="[0-9]*" maxlength="11" placeholder="请输入" @input='inputFn' v-model="mobile" />
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__hd">
                    <label class="weui-label">验证码</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" placeholder="请输入" v-model="msg_code">
                </div>
                <div class="weui-cell__ft" @click="getvcodeFn">
                    <a href="javascript:;" class="weui-vcode-btn" :style="isValid&&nextget<0?'color:rgb(255,170,0)':''">{{nextget>=0 ? nextget+'s后重发' : '获取验证码'}}</a>
                </div>
            </div>
        </div>
        <div class="confirm">
            <a href="javascript:;" class="weui-btn weui-btn_primary" :style="msg_code&&isValid&&old_mobile !== this.mobile?'border-radius:4px;':'border-radius:4px;background-color:rgba(255,170,0,0.4)'" @click="confirmFn">确认更换</a>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import widget from 'gapi/widget.js'
    import clientUi from 'gapi/clientUi'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import userCenterApi from 'clientApi/userCenterApi'
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                old_mobile: '',
                mobile: '',
                msg_code: '',
                nextget: -1,
                isValid: false,
                deviceInfo: {
                    mobile_system: ''
                }
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                this.old_mobile = util.getUrddataString('mobile')
                userCenterApi.getDeviceInfo((info) => {
                    if(info){
                        this.deviceInfo = info                   
                    }
                })
            },
            inputFn(){
                this.isValid = /^\d{11}$/.test(this.mobile)
            },
            getvcodeFn(){
                if(!this.isValid || this.nextget >= 0)return
                if(this.old_mobile === this.mobile) {
                    widget.toast('您当前已绑定该手机')
                    return
                }
                util.ajax({
                    url:'/common/msg/get',
                    type:'POST',
                    data:{
                        mobile: this.mobile
                    },
                    timeout:10000,
                    success:(obj) => {
                        // alert(JSON.stringify(obj))
                        // commonPage.loadPageStatus('loadSuccess')
                        if(obj&&obj.errno == 0){
                            widget.toast('验证码发送成功')

                            this.nextget = 60
                            let interval = setInterval(() => {
                                console.log(this.nextget)
                                this.nextget --
                                if(this.nextget < 0){
                                    clearInterval(interval)
                                }
                            },1000)

                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })

                

            },
            confirmFn(){
                if(this.msg_code&&this.isValid&&this.old_mobile !== this.mobile){
                    clientUi.showDialog('确定将你的手机号更换为：', this.mobile, (data) => {
                        if(data.status==1){
                            // alert(JSON.stringify({
                            //         mobile: this.mobile,
                            //         msg_code: this.msg_code,
                            //         system_version: this.deviceInfo.mobile_system
                            //     }))
                            util.ajax({
                                url:'/user/mobile/edit',
                                type:'POST',
                                data:{
                                    mobile: this.mobile,
                                    msg_code: this.msg_code,
                                    system_version: this.deviceInfo.mobile_system,
                                    device_id:this.deviceInfo.device_id

                                },
                                timeout:10000,
                                success:(obj) => {
                                    // alert(JSON.stringify(obj))
                                    // commonPage.loadPageStatus('loadSuccess')
                                    if(obj&&obj.errno == 0){
                                        widget.toast('手机号更换成功')
                                        cache.getMemoryCache('webViewID',(data)=>{
                                            if(data){
                                                commonPage.goBack(1,{'key': 'mobile','value': this.mobile},data.webViewID)
                                            }
                                        })
                                    }else{
                                        widget.toast(obj.errmsg)
                                    }
                                },
                                error: (xhr, status) => {
                                    // commonPage.loadPageStatus('loadSuccess')
                                    widget.toast('服务器异常')
                                },
                                noNetwork: () => {
                                    // commonPage.loadPageStatus('loadSuccess')
                                    widget.toast('网络连接失败，请检查网络')
                                }
                            })
                        }
                    }, '确定', '取消')

                }
            },
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<!-- <style src="static/css/global.css"></style> -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style scope>
    .changemyphone{
        padding: 0.1px;
    }
    .weui-cells {
        margin-top: 40px;
    }
    .weui-cell {
        padding: 13px 12px;
    }
    .weui-cell__bd .title, .weui-label {
        color: rgb(102,102,102);
        font-size: 16px;
    }
    /*获取验证码*/
    .weui-vcode-btn {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: rgb(187,187,187);
        padding: 0 0 0 12px;
        width: 83px;
        text-align: center;
    }
    .weui-vcode-btn:active {
        color: rgb(187,187,187);
    }
    ::-webkit-input-placeholder {
      color: rgb(153,153,153)!important;
      font-size: 16px;
    }

    .confirm{
        padding: 30px 24px 0 ;
    }
</style>


